<template>
    <el-form label-position="left" size="mini" label-width="80px">
        <el-form-item v-if="this.name === 'onChange'" label="期望值">
            <el-select
                :value="getVal('value')"
                default-first-option
                filterable
                allow-create
                clearable
                placeholder="输入或选择"
                @change="setVal('value', $event)"
            >
                <el-option label="布尔值: true" :value="true"/>
                <el-option label="布尔值: false" :value="false"/>
            </el-select>
        </el-form-item>
        <el-form-item v-if="this.name === 'onDrag'" label="拖拽至">
            <el-select
                clearable
                placeholder="请选择物品"
                :value="getVal('value')"
                @change="setVal('value', $event)"
            >
                <el-option
                    v-for="(item, i) in items"
                    :key="`${item.name}_${i}`"
                    :label="item.name"
                    :value="item.name"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item v-if="activedEditor === 'apps' && this.name === 'onClick'" label="校验">
            <el-select
                multiple
                collapse-tags
                placeholder="请选择"
                :value="getVal('check')"
                @change="setVal('check', $event)"
            >
                <el-option
                    v-for="opt in itemNamesOptions"
                    :key="`options_${opt}`"
                    :label="opt"
                    :value="opt"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="显示">
            <el-select
                multiple
                collapse-tags
                placeholder="请选择"
                :value="getVal('show')"
                @change="setVal('show', $event)"
            >
                <el-option
                    v-for="opt in itemNamesOptions"
                    :key="`options_${opt}`"
                    :label="opt"
                    :value="opt"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="隐藏">
            <el-select
                multiple
                collapse-tags
                placeholder="请选择"
                :value="getVal('hide')"
                @change="setVal('hide', $event)"
            >
                <el-option v-if="activedEditor === 'apps'" label="self" value="self"/>
                <el-option
                    v-for="opt in itemNamesOptions"
                    :key="`options_${opt}`"
                    :label="opt"
                    :value="opt"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="activedEditor === 'apps'" label="跳转到">
            <el-select
                placeholder="请选择交易界面"
                :value="getVal('app')"
                @change="setVal('app', $event)"
                clearable
            >
                <el-option v-for="app in apps" :key="app.name" :label="app.name" :value="app.name"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="进入">
            <el-switch active-text="下一环节" :value="getVal('next')" @change="setVal('next', $event)"/>
        </el-form-item>
        <el-form-item label="得分">
            <el-input-number :value="getVal('score')" @input="setVal('score', $event)" :min="0"></el-input-number>
        </el-form-item>
    </el-form>
</template>
<script>
import Vue from 'vue'
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
    name: 'event-config',
    props: ['name', 'items', 'item', 'update'],
    computed: {
        ...mapState('course', ['apps', 'activedEditor']),
        itemNamesOptions() {
            return this.items.reduce((last, curr) => {
                if (last.indexOf(curr.name) < 0) {
                    last.push(curr.name)
                }
                return last
            }, [])
        }
    },
    methods: {
        getVal(key) {
            let event
            if (this.update === 'updateActivedApp') {
                event = (this.item.events && this.item.events[this.name]) || {}
            } else {
                event = this.item[this.name] || {}
            }
            if (key === 'next') {
                return event && event.pages === 1 ? true : false
            } else if (key === 'show' || key === 'hide' || key === 'check') {
                return event && event[key] ? event[key].split(',') : []
            } else {
                return event && event[key] !== undefined ? event[key] : ''
            }
        },
        setVal(key, value) {
            let event
            if (this.update === 'updateActivedApp') {
                event = (this.item.events && this.item.events[this.name]) || {}
            } else {
                event = this.item[this.name] || {}
            }
            if (key === 'next') {
                event = { ...event, pages: value ? 1 : 0 }
            } else if (key === 'show' || key === 'hide' || key === 'check') {
                event = { ...event, [key]: value.join(',') }
            } else {
                event = { ...event, [key]: value }
            }
            if (this.update === 'updateActivedApp') {
                this.item = {
                    ...this.item,
                    events: { ...this.item.events, [this.name]: event }
                }
            } else {
                Vue.set(this.item, this.name, event)
            }
            // 通过update参数调用不同的mutation方法
            this.$store.commit(`course/${this.update}`, this.item)
        }
    }
}
</script>
<style lang="less">
</style>


